<template>
  <el-table :data="tableData" header-cell-class-name="table-header">
    <el-table-column
        prop="event"
        label="触发事件">
    </el-table-column>
    <el-table-column
      prop="template.name"
      label="当前短信模板">
    </el-table-column>
    <el-table-column
      prop="target"
      label="发送对象">
      <template #default="scope">
        <span v-for="(item,index) in scope.row.target" :key="item.id">
          {{item.name}}{{((index+1) === scope.row.target.length)?"":","}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
        label="启用开关">
      <template #default="scope">
        <el-switch v-model="scope.row.enable" @change="handleChange(scope.$index, scope.row.enable)"></el-switch>
      </template>
    </el-table-column>
    <el-table-column
      label="操作">
      <template #default="scope">
        <el-button
            type="text"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog title="更改模板配置" v-model="dialogVisible" width="30%">
    <el-form :model="dialogData">
      <el-form-item label="触发事件" prop="event">
        {{dialogData.event}}
      </el-form-item>
      <el-form-item label="选择模板">
        <el-select v-model="dialogData.template.id" placeholder="请选择" @change="handleSelectChange">
          <el-option
              v-for="item in templates"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发送对象">
        <el-row :gutter="20">
          <el-col :span="14">
            <el-checkbox-group v-model="dialogData.target">
              <el-checkbox v-for="c in characters" :key="c.id" :label="c">
                {{c.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-col>
          <el-col :span="10">
            <el-input v-if="dialogData.target.includes(-1)" v-model="dialogData.detail" placeholder="请输入电话号码"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="模板预览">
        <el-input type="textarea" v-model="dialogData.template.content" rows="5" disabled></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">保 存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";

export default {
  name: "ConfigTable",
  data(){
    return{
      tableData:[{
        event:'创建申请',
        template:'审批提醒',
        target:'审批人',
        active:true
      },{
        event:'创建申请',
        template:'审批提醒',
        target:'审批人',
        active:true
      },{
        event:'创建申请',
        template:'审批提醒',
        target:'审批人',
        active:true
      },{
        event:'创建申请',
        template:'审批提醒',
        target:'审批人',
        active:true
      },],

      dialogVisible:false,
      dialogData:{
        event:'创建申请',
        template:'',
        target:[],
        content:'',
        detail:''
      },
      templates:[{
        id:1,
        name:'审批提醒'
      }],
      characters:[]
    }
  },
  methods:{
    handleChange(index,active){
      console.log(index,active);
      this.updateEnableById(index,active).then(()=>{
        this.findAllMessageConfig();
      })
    },
    handleEdit(index,row){
      Promise.all([this.findMessageConfigById(row.id),this.findAllMessageTemplate(),this.findAllCharacter()]).then(()=>{
        this.updateTarget(this.dialogData);
      }).then(()=>{
        this.findMessageTemplateById(this.dialogData.template.id).then(()=>{
          this.dialogVisible = true;
        })
      })
    },
    handleSelectChange(templateId){
      this.findMessageTemplateById(templateId);
    },
    submit(){
      this.dialogVisible = false;
      // console.log(this.dialogData);
      this.updateMessageConfig(this.dialogData).then(()=>this.findAllMessageConfig());
    },
    findAllMessageConfig(){
      return axios.get(this.$host+"/message/config").then((response)=>{
        if(response.data.code === 0){
          this.tableData = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllMessageTemplate(){
      return axios.get(this.$host+"/message/template").then((response)=>{
        if(response.data.code === 0){
          this.templates = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    updateEnableById(index,enable){
      let url = this.$host+"/message/config/"+this.tableData[index].id
      if(enable){
        return axios.post(url)
      }else{
        return axios.delete(url)
      }
    },
    findMessageConfigById(id){
      return axios.get(this.$host+"/message/config/"+id).then((response)=>{
        if(response.data.code === 0){
          this.dialogData = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    updateMessageConfig(data){
      return axios.put(this.$host+"/message/config",data).then((response)=>{
        if(response.data.code === 0){
          this.$message.success("修改成功");
        }else{
          this.$message.error(response.data.data.msg);
        }
      });
    },
    findAllCharacter(){
      return axios.get(this.$host+"/character").then(response =>{
        if(response.data.code === 0){
          this.characters = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findMessageTemplateById(id){
      return axios.get(this.$host+"/message/template/"+id).then((response)=> {
        if (response.data.code === 0) {
          this.dialogData.template = response.data.data;
        } else {
          this.$message.error(response.data.msg);
        }
      })
    },
    updateTarget(data){
      let target = [];
      data.target.forEach((value)=>{
        target.push(this.characters.find((currentValue)=>{
          return currentValue.id === value.id
        }));
      });
      data.target = target;
    }
  },
  created() {
    this.findAllMessageConfig();
  }
}
</script>

<style scoped>

</style>